<template>
  <view class="fatherCardBox">
    <view v-for="item in list" :key="item.id" class="Card">
      <view class="CardTitleBox">
        <text> {{ item.alt }}</text>
        <text class="Title-desc"> {{ item.title }}</text>
      </view>
      <view class="CardImgBox">
        <navigator hover-class="none" :url="`/pages/hot/hot?type=${item.type}`" class="CardImg" >
          <image  v-for="(value, index) in item.pictures" :key="index"  class="CardImgItem" :src="value" mode="scaleToFill"></image>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { HotPanelItem } from "../../../APi/types";

const props = defineProps<{
  list: HotPanelItem[];
}>();
</script>

<style scoped lang="scss">
.fatherCardBox {
  background-color: white;
  min-height: 508rpx;
  margin: 20rpx 25rpx 0;
  border-radius: 10rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  .Card {
    border-right: 1rpx solid #eee;
    border-top: 1rpx solid #eee;
    .CardTitleBox {
      padding: 24rpx 24rpx 0;
      font-size: 32rpx;
      color: #262626;
      
      .Title-desc {
        font-size: 24rpx;
        color: #7f7f7f;
        margin-left: 18rpx;
      }
    }
      &:nth-child(2n) {
      border-right: 0 none;
    }
    &:nth-child(-n + 2) {
      border-top: 0 none;
    }
    .CardImgBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 15rpx;
      .CardImg {
        .CardImgItem {
            margin-left:10rpx
            ;
          width: 150rpx;
          height: 150rpx;
        }
      }
    }
  }
}
</style>
